<template>
  <div>
    <Navs></Navs>
    <div style="background: #f4f5f5">
      <main class="container">
        <div class="view setting-profile-view">
          <h2>个人资料</h2>
          <ul class="setting-list">
            <li class="item">
              <span class="title">头像</span>
              <div class="avatar_e" size="80" style="text-align: center">
                <img
                  class="avatar_img"
                  :src="host_img"
                  alt="John"
                  @click.stop="uploadHeadImg"
                />
              </div>
              <form enctype="multipart/form-data">
                <input
                  type="file"
                  accept="image/*"
                  @change="handleFile"
                  class="hiddenInput"
                  style="display: none"
                />
              </form>
            </li>
            <li class="item">
              <span class="title">用户名</span>
              <div class="input-box profile-input">
                <input
                  @click="blur_inp"
                  spellcheck="false"
                  placeholder="填写你的昵称"
                  v-model="info.data.nick_name"
                  class="input"
                />
                <div v-if="btn_state === 1" class="action-box">
                  <button @click="name_edit" tabindex="-1" class="btn edit-btn">
                    <span>修改</span>
                  </button>
                </div>
                <div v-if="btn_state === 0" class="action-box">
                  <button @click="name_save"
                    tabindex="-1"
                    class="btn edit-btn"
                    style="margin-right: 10px"
                  >
                    <span >保存</span>
                  </button>
                  <button @click="name_cancle" tabindex="-1" class="btn edit-btn">
                    <span >取消</span>
                  </button>
                </div>
              </div>
            </li>
            <li class="item">
              <span class="title">性别</span>
              <div class="input-box profile-input profile-sex">
                <div v-if="btn_state4 === 1" class="sexprofile">
                  {{ sexitem1 }}
                </div>
                <select
                  ref="select"
                  v-if="btn_state4 === 0"
                  v-model="info.data.sex"
                >
                  <option
                    v-for="(item, index) of listArray"
                    :value="item.sex"
                    :key="index"
                  >
                    {{ item.sex }}
                  </option>
                </select>
                <div v-if="btn_state4 === 1" class="action-box">
                  <button @click="sex_edit" tabindex="-1" class="btn edit-btn">
                    <span>修改</span>
                  </button>
                </div>
                <div v-if="btn_state4 === 0" class="action-box">
                  <button @click="sex_save"
                    tabindex="-1"
                    class="btn edit-btn"
                    style="margin-right: 10px"
                  >
                    <span >保存</span>
                  </button>
                  <button  @click="sex_cancle" tabindex="-1" class="btn edit-btn">
                    <span>取消</span>
                  </button>
                </div>
              </div>
            </li>
            <li class="item">
              <span class="title">兴趣爱好</span>
              <div class="input-box profile-input">
                <input
                  @click="blur_inp1"
                  spellcheck="false"
                  v-model="info.data.insert"
                  placeholder="填写职业技能、擅长的事情、喜欢的事情等"
                  class="input"
                />
                <div v-if="btn_state1 === 1" class="action-box">
                  <button @click="insert_edit" tabindex="-1" class="btn edit-btn">
                    <span >修改</span>
                  </button>
                </div>
                <div v-if="btn_state1 === 0" class="action-box">
                  <button @click="insert_save"
                    tabindex="-1"
                    class="btn edit-btn"
                    style="margin-right: 10px"
                  >
                    <span >保存</span>
                  </button>
                  <button @click="insert_cancle" tabindex="-1" class="btn edit-btn">
                    <span >取消</span>
                  </button>
                </div>
              </div>
            </li>
            <li class="item">
              <span class="title">QQ</span>
              <div class="input-box profile-input">
                <input
                  @click="blur_inp2"
                  spellcheck="false"
                  placeholder="请填写你的QQ号"
                  v-model="info.data.qq"
                  class="input"
                />
                <div v-if="btn_state2 === 1" class="action-box">
                  <button @click="qq_edit" tabindex="-1" class="btn edit-btn">
                    <span >修改</span>
                  </button>
                </div>
                <div v-if="btn_state2 === 0" class="action-box">
                  <button 
                  @click="qq_save"
                    tabindex="-1"
                    class="btn edit-btn"
                    style="margin-right: 10px"
                  >
                    <span >保存</span>
                  </button>
                  <button  @click="qq_cancle" tabindex="-1" class="btn edit-btn">
                    <span>取消</span>
                  </button>
                </div>
              </div>
            </li>
            <li class="item">
              <span class="title">电话号</span>
              <div class="input-box profile-input">
                <input
                  @click="blur_inp3"
                  spellcheck="false"
                  placeholder="填写你的电话号"
                  v-model="info.data.phone"
                  class="input"
                />
                <div v-if="btn_state3 === 1" class="action-box">
                  <button @click="phone_edit" tabindex="-1" class="btn edit-btn">
                    <span >修改</span>
                  </button>
                </div>
                <div v-if="btn_state3 === 0" class="action-box">
                  <button @click="phone_save"
                    tabindex="-1"
                    class="btn edit-btn"
                    style="margin-right: 10px"
                  >
                    <span >保存</span>
                  </button>
                  <button @click="phone_cancle" tabindex="-1" class="btn edit-btn">
                    <span >取消</span>
                  </button>
                </div>
              </div>
            </li>
            <li class="item">
              <span class="title">密码</span>
              <div class="input-box profile-input">
                <div class="action-box">
                  <el-button type="text" @click="centerDialogVisible = true"
                    >重置</el-button
                  >
                </div>
              </div>
            </li>
            <el-dialog
              title="提示"
              :visible.sync="centerDialogVisible"
              width="30%"
              center
            >
              <el-form ref="form" label-width="80px">
                <el-form-item label="旧密码">
                  <el-input v-model="old"></el-input>
                </el-form-item>
                <el-form-item label="新密码">
                  <el-input v-model="pw"></el-input>
                </el-form-item>
              </el-form>
              <span slot="footer" class="dialog-footer">
                <el-button @click="centerDialog1">取 消</el-button>
                <el-button type="primary" @click="centerDialog"
                  >确 定</el-button
                >
              </span>
            </el-dialog>
          </ul>
        </div>
      </main>
    </div>
  </div>
</template>

<script>
import Nav from "../../components/nav.vue";

export default {
  name: "",
  created() {
    this.getData();
  },
  components: {
    Navs: Nav,
  },
  data() {
    return {
      listArray: [
        { name: "1", sex: "男" },
        { name: "2", sex: "女" },
        { name: "3", sex: "保密" },
      ],
      sexitem: "",
      sexitem1: "",
      old: "",
      pw: "",
      host_img: JSON.parse(localStorage.getItem("headimg")),
      centerDialogVisible: false,
      msg: "",
      //用户所有信息
      info: {
        data: {
          nick_name: "",
        },
      },
      //用户初始头像路径(根据上传动态改变)
      userInfo: {
        avatar: require("../../assets/img/logo/logo.png"),
      },
      headimg: "",
      //按钮状态值（默认1为显示）
      btn_state: 1,
      btn_state1: 1,
      btn_state2: 1,
      btn_state3: 1,
      btn_state4: 1,
      the_token: "",
    };
  },

  methods: {
    centerDialog1() {
      this.centerDialogVisible = false;
    },
    centerDialog() {
      this.centerDialogVisible = false;
      if (this.info.data.pw !== this.old) {
        this.$alert("旧密码输入错误", "密码错误", {
          confirmButtonText: "确定",
          callback: (action) => {
            console.log(action);
          },
        });
      } else if (this.info.data.pw === this.pw) {
        this.$alert("新密码和旧密码相同", "密码错误", {
          confirmButtonText: "确定",
          callback: (action) => {
            console.log(action);
          },
        });
      } else {
        this.axios
          .post("http://api_devss.wanxikeji.cn/api/rePassword", {
            token: this.info.data.token,
            pw: this.pw,
            old: this.info.data.pw,
          })
          .then((res) => {
            console.log(res.data);
          });
      }
    },
    uploadHeadImg() {
      this.$el.querySelector(".hiddenInput").click();
    },
    handleFile(e) {
      let $target = e.target || e.srcElement;
      let file = $target.files[0];
      var reader = new FileReader();
      reader.onload = (data) => {
        let res = data.target || data.srcElement;
        this.userInfo.avatar = res.result;
      };
      reader.readAsDataURL(file);
      let param = new FormData();
      param.append("img", file);
      this.userInfo.avatar = file;
      this.axios
        .post("http://api_devss.wanxikeji.cn/api/savePic", param)
        .then((response) => {
          this.userInfo.avatar = response.data.data;
          console.log(response.data);
          // console.log(this.userInfo.avatar);
          this.host_img = "http://api_devss.wanxikeji.cn/" + response.data.data;
          localStorage.setItem("headimg", JSON.stringify(this.host_img));
          // console.log(this.host_img);
          this.axios
            .post("http://api_devss.wanxikeji.cn/api/userModify", {
              token: this.info.data.token,
              icon: this.userInfo.avatar,
            })
            .then((res) => {
              console.log(res.data);
            });
        });
    },
    //获取所有数据
    getData() {
      this.axios
        .post("http://api_devss.wanxikeji.cn/api/userAllInfo", {
          token: this.$store.state.token,
        })
        .then((response) => {
          console.log(response.data);
          this.info = response.data;
          if (this.info.data.sex === 1) {
            this.sexitem1 = "男";
          } else if (this.info.data.sex === 2) {
            this.sexitem1 = "女";
          } else if (this.info.data.sex === 3) {
            this.sexitem1 = "保密";
          }
          console.log(this.info.data.icon);
          this.host_img = "http://api_devss.wanxikeji.cn/" + this.info.data.icon;
          console.log(this.sexitem1);
        });
      this.the_token = this.$store.state.token;
      console.log(this.$store.state.token);
    },

    //各种按钮状态改变
    sex_edit() {
      this.btn_state4 = 0;
    },
    sex_save() {
      let optionV = this.$refs.select.value;
      if (optionV === "男") {
        this.sexitem = 1;
      } else if (optionV === "女") {
        this.sexitem = 2;
      } else if (optionV === "保密") {
        this.sexitem = 3;
      }
      console.log(this.sexitem);
      console.log(optionV);
      this.axios
        .post("http://api_devss.wanxikeji.cn/api/userModify", {
          token: this.info.data.token,
          sex: this.sexitem,
        })
        .then((response) => {
          console.log(response.data);
          this.getData();
        });
      this.btn_state4 = 1;
    },
    sex_cancle() {
      this.btn_state4 = 1;
    },
    name_edit() {
      this.btn_state = 0;
    },
    name_cancle() {
      this.btn_state = 1;
    },
    name_save() {
      this.axios
        .post("http://api_devss.wanxikeji.cn/api/userModify", {
          token: this.info.data.token,
          nick_name: this.info.data.nick_name,
        })
        .then((response) => {
          console.log(response.data);
        });
      this.btn_state = 1;
    },
    blur_inp() {
      this.btn_state = 0;
    },
    insert_edit() {
      this.btn_state1 = 0;
    },
    insert_save() {
      this.axios
        .post("http://api_devss.wanxikeji.cn/api/userModify", {
          token: this.info.data.token,
          insert: this.info.data.insert,
        })
        .then((response) => {
          console.log(response.data);
        });
      this.btn_state1 = 1;
    },
    insert_cancle() {
      this.btn_state1 = 1;
    },
    blur_inp1() {
      this.btn_state1 = 0;
    },
    qq_edit() {
      this.btn_state2 = 0;
    },
    qq_save() {
      this.axios
        .post("http://api_devss.wanxikeji.cn/api/userModify", {
          token: this.info.data.token,
          qq: this.info.data.qq,
        })
        .then((response) => {
          console.log(response.data);
        });
      this.btn_state2 = 1;
    },
    qq_cancle() {
      this.btn_state2 = 1;
    },
    blur_inp2() {
      this.btn_state2 = 0;
    },
    phone_edit() {
      this.btn_state3 = 0;
    },
    phone_save() {
      console.log(this.info.data.phone);
      if (!/^1[3456789]\d{9}$/.test(this.info.data.phone)) {
        this.$alert("电话号格式错误", "电话错误", {
          confirmButtonText: "确定",
          callback: (action) => {
            console.log(action);
          },
        });
      } else {
        this.axios
          .post("http://api_devss.wanxikeji.cn/api/userModify", {
            token: this.info.data.token,
            phone: this.info.data.phone,
          })
          .then((response) => {
            console.log(response.data);
          });
        this.btn_state3 = 1;
      }
    },
    phone_cancle() {
      this.btn_state3 = 1;
    },
    blur_inp3() {
      this.btn_state3 = 0;
    },
  },
};
</script>
<style scoped>
* {
  list-style: none;
  text-decoration: none;
}
.avatar_img {
  width: 100%;
  height: 100%;
}

.avatar_e {
  width: 60px;
  height: 60px;
  border-radius: 60px;
  overflow: hidden;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 100px;
  height: 100px;
  line-height: 100px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
.container {
  margin: 0 auto;
  width: 100%;
  max-width: 760px;
  background-color: #fff;
}
.setting-profile-view {
  position: relative;
  padding: 2rem 4rem 7rem;
  border-radius: 2px;
}

.setting-list .item {
  display: flex;
  align-items: center;
  padding: 0.5rem 0;
  border-top: 1px solid #f1f1f1;
}

.setting-list {
  padding: 0.3rem 0;
}
.setting-list .title {
  font-size: 0.9rem;
  color: #333;
  width: 8rem;
}
.avatar-uploader {
  display: flex;
}
.setting-list .item .action-box {
  margin-left: 1rem;
}
.setting-list .item {
  display: flex;
  align-items: center;
  padding: 1.2rem 0;
  border-top: 1px solid #f1f1f1;
}
.profile-input {
  display: flex;
  justify-content: flex-end;
  flex: 1;
}
.input {
  flex: 1;
  display: inline-block;
  border: none;
  outline: none;
  color: #909090;
  font-size: 16px;
}
.button,
button {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-color: #007fff;
  color: #fff;
  border-radius: 2px;
  border: none;
  padding: 0.5rem 1.3rem;
  outline: none;
  transition: background-color 0.3s, color 0.3s;
  cursor: pointer;
}
::-webkit-input-placeholder {
  color: #999;
  font-size: 16px;
}
.profile-sex {
  justify-content: space-between;
}
.sexprofile {
  color: #999;
  font-size: 15px;
  line-height: 28px;
}
</style>